<template>
    <!-- 用户信息板块 -->
    <div id="user-data">
        <div id="user">
            <span id="username"></span>
            <img src="../../components/icons/用户_B.svg" alt="用户">
        </div>

        <div id="gold">
            <span>口袋币</span>
            <span id="gold-num">0</span>
        </div>
    </div>

    <!-- 签到板块 -->
    <div id="checkin">
        <div id="date">
            {{ year }} 年 {{ month }} 月
        </div>

        <!-- 显示七天 -->
        <div id="seven-days">
            <template v-for="day in 7" :key="day">
                <span class="day" :id="`day-${day}`">{{ day }}</span>
            </template>
        </div>
        
        <div id="checkin-bottom">
            <!-- 显示签到天数 -->
            <div id="checkin-num">已签到:   天</div>

            <!-- 按钮 -->
            <div id="checkin-button" @click="api.check_one_day">签到 ~</div>
        </div>
    </div>

    <!-- 打工板块 -->
    <div id="work-container">
        <!-- 状态 -->
        <div id="work-status">
            <span>未开工</span>
            <span>状态</span>
        </div>

        <!-- 交互 -->
        <div id="work-start">
            <span>打工 1 分钟</span>
            <img src="../../components/icons/开始打工.svg" alt="开始按钮">
        </div>
    </div>
</template>

<style src="./me.css" scoped></style>

<script setup>
import { Api } from '@/assets/js/api';
import { ref } from 'vue';

//登录验证保护
const api = new Api();
api.check_session();

//获取用户信息
api.get_user();

//日期获取
const date = new Date();
const year = ref(date.getFullYear())
const month = ref(date.getMonth() + 1);

//获取签到天数
api.get_check_data();
</script>